<template>
  <div class="mine-container">
    <!-- 用户信息区域 -->
    <div class="user-info">
      <div class="user-info-content">
        <van-image
          round
          width="70"
          height="70"
          :src="userInfo.avatar || 'src/assets/images/profile-icon.png'"
          class="avatar"
        />
        <div class="user-detail">
          <div class="username">{{ userInfo.nickname }}</div>
        </div>
      </div>

    </div>

    <!-- 统计数据区域 -->
    <div class="statistics">
      <div class="stat-item">
        <div class="number">{{ userInfo.activeLamps }}</div>
        <div class="label">在供连灯数</div>
      </div>
      <div class="stat-item">
        <div class="number">{{ userInfo.totalSupplyCnt }}</div>
        <div class="label">供奉次数</div>
      </div>
      <div class="stat-item">
        <div class="number">{{ userInfo.totalAmount }}</div>
        <div class="label">供奉总金额</div>
      </div>
    </div>

    <!-- 功能列表 -->
    <div class="function-list">
      <van-cell-group>
        <van-cell
          title="祈福记录"
          is-link
          to="/blessing-records"
          icon="records"
        >
          <template #title>
            <span class="cell-title">祈福记录</span>
          </template>
        </van-cell>
        <van-cell
          title="祈福排行"
          is-link
          to="/ranking"
          icon="medal-o"
        >
          <template #title>
            <span class="cell-title">祈福排行</span>
          </template>
        </van-cell>
        <van-cell
          title="帮助中心"
          is-link
          icon="question-o"
        >
          <template #title>
            <span class="cell-title">帮助中心</span>
          </template>
        </van-cell>
        <van-cell
          title="关于我们"
          is-link
          icon="info-o"
          @click="logout"
        >
          <template #title>
            <span class="cell-title">关于我们</span>
          </template>
        </van-cell>
      </van-cell-group>
    </div>
  </div>
  <tabbar></tabbar>
</template>

<script setup>
import {onMounted, ref} from 'vue'
import tabbar from '@/components/tabbar/index.vue'
import profileIcon from '@/assets/images/profile-icon.png'
import {getSupplyCntAndAmount, getSupplyingCnt} from "@/api/lotos-lamp.js";
import {useUserStore} from "@/store/user.js";
import {checkUserAndAuth, handleToken} from "@/utils/auth.js";
const userStore = useUserStore()

const userInfo = ref({
  avatar: profileIcon, // 用户头像URL
  nickname: '昵称',
  openid: '',
  activeLamps: 0,
  totalSupplyCnt: 0,
  totalAmount: 0
})

const loadUserOrderInfo = () => {
  getSupplyingCnt({openid:userInfo.value.openid}).then(res => {
    userInfo.value.activeLamps = res.data
  })

  getSupplyCntAndAmount({openid:userInfo.value.openid}).then(
      res => {
        userInfo.value.totalSupplyCnt = res.data.totalSupplyCnt
        userInfo.value.totalAmount = res.data.totalSupplyAmount
      }
  )
}

const logout = () => {
  userStore.clearUserInfo()
  window.location.href = '/'
}

onMounted(async () => {
  // 检查是否已经有用户信息
  if (userStore.userInfo && userStore.userInfo.openid) {
    userInfo.value = userStore.userInfo
    loadUserOrderInfo()
    return
  }

  // 检查 URL 中是否有 token
  const hasToken = await handleToken()
  if (hasToken) {
    userInfo.value = userStore.userInfo
    loadUserOrderInfo()
    return
  }

  // 如果既没有用户信息也没有 token，则进行授权
  checkUserAndAuth()
})
</script>

<style scoped>
.mine-container {
  min-height: 100vh;
  background-color: var(--primary-bg, #f7f8fa);
  padding: 35px;
  padding-bottom: 100px; /* 为tabbar留出空间 */
}

.user-info {
  background: var(--primary-bg, #f7f8fa);
  border-radius: 20px;
  padding: 30px;
  margin-bottom: 25px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.user-info-content {
  display: flex;
  align-items: center;
}

.avatar {
  margin-right: 35px;
  border: 2px solid #DF5454;
}

.user-detail {
  flex: 1;
}

.username {
  font-size: 32px !important;
  font-weight: bold;
  color: #DF5454;
  line-height: 44px !important;
}

.statistics {
  display: flex;
  justify-content: space-between;
  padding: 30px;
  background: #FFF5E6;
  border-radius: 20px;
  height: 150px;
  margin-top: 25px;
  margin-bottom: 15px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.stat-item {
  text-align: center;
  flex: 1;
  position: relative;
}

/* 添加分隔线 */
.stat-item:not(:last-child)::after {
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 100%;
  width: 1px;
  background-color: #eee;
}

.number {
  font-size: 32px !important;
  font-weight: bold;
  color: #DF5454;
  margin-bottom: 8px;
  line-height: 44px !important;
}

.label {
  font-size: 28px !important;
  color: #898686;
  line-height: 40px !important;
}

.function-list {
  background: #FFF5E6;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

/* 自定义单元格样式 */
:deep(.van-cell) {
  padding: 32px 24px !important;
  align-items: center;
  background: #FFF5E6;
  color: #DF5454;
  height: auto !important;
  line-height: normal !important;
}

:deep(.van-cell::after) {
  border-bottom: 1px solid #333;
}

.cell-title {
  font-size: 28px !important;
  font-weight: 500;
  color: #DF5454;
  line-height: 40px !important;
}

/* 调整图标大小 */
:deep(.van-cell__left-icon) {
  font-size: 36px !important;
  margin-right: 20px !important;
  color: #DF5454;
}

:deep(.van-cell__right-icon) {
  color:#DF5454;
  font-size: 32px !important;
}

/* 调整图标与文字的对齐 */
:deep(.van-cell__title) {
  display: flex;
  align-items: center;
}

/* 添加点击效果 */
:deep(.van-cell:active) {
  background-color: #2d3239;
}

/* 调整头像大小 */
:deep(.van-image) {
  width: 120px !important;
  height: 120px !important;
}

/* 调整单元格组样式 */
:deep(.van-cell-group) {
  background: transparent;
}

/* 确保所有文字大小一致 */
:deep(.van-cell__value) {
  font-size: 28px !important;
  line-height: 40px !important;
}

/* 修改 tabbar 背景色 */
:deep(.van-tabbar) {
  background-color: #FFF9F0 !important;
}

:deep(.van-tabbar-item) {
  background-color: #FFF9F0 !important;
}

:deep(.van-tabbar-item--active) {
  background-color: #FFF9F0 !important;
}

:deep(.van-tabbar--fixed) {
  background-color: #FFF9F0 !important;
}
</style>
